<template>
    <el-card style="height: 335px;">
        <div slot="header" class="header">
            <div class="category-header">
                <span>城市销售占比</span>
                <el-radio-group v-model="radio" size="mini">
                    <el-radio-button label="全部渠道"></el-radio-button>
                    <el-radio-button label="线上"></el-radio-button>
                    <el-radio-button label="门店"></el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="charts" ref="charts"></div>
    </el-card>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            radio: '全部渠道',
            charts: null,
            categoryData: [{
                name: "北京",
                value: 3440
            },
            {
                name: "上海",
                value: 8101
            },
            {
                name: "四川",
                value: 7814
            },
            {
                name: "深圳",
                value: 8888
            },
            {
                name: "合肥",
                value: 6204
            }]
        }
    },
    mounted() {
        this.charts = echarts.init(this.$refs.charts);
        this.charts.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: `城市销售占比`,
                    type: 'pie',
                    radius: '70%',
                    data: this.categoryData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
    }
}
</script>

<style scoped>
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header {
    border-bottom: 2px solid #e4e7ed;
    padding-bottom: 10px;
}

.charts {
    width: 100%;
    height: 250px;
}
</style>